<template>
    <div class="index">
        <!-- <div class="ms"></div> -->
        <div class="bg"></div>
        <el-container>
            <el-header :height="headerHeight">
                <div class="header-box">
                    <component :is="headeComponent"/>
                </div>
                <div class="header-box">
                    <Nav/>
                </div>
            </el-header>
            <el-main>
                <scroll class="el-main-contianer">
                    <div>
                        <router-view></router-view>
                        <el-footer class="footer">

                            <div>
                                哈尔滨理工大学创业团队：
                                崔文辉 杜鑫 董露云 刘特 侯林枫
                            </div>
                            <div>
                                指导教师：
                                赵一峰 辛士光
                            </div>

                        </el-footer>
                    </div>
                </scroll>
            </el-main>
        </el-container>
    </div>
</template>
<script>
  import Scroll from "@/commonPages/commonComponents/Scroll";

  import {Container, Main, Header, Footer} from "element-ui";

  export default {
    data() {
      return {
        headeComponent: "IndexHeader",
        headerHeight: "140px"
      };
    },
    components: {
      Scroll,
      ElContainer: Container,
      ElMain: Main,
      ElFooter: Footer,
      ElHeader: Header,
      IndexHeader: () => import("../commonComponents/Header"),
      SmallIndexHeader: () => import("../commonComponents/SmallScreenHeader"),
      Nav: () => import("../commonComponents/Nav")
    },
    methods: {},
    watch: {
      showLogin(newValue) {
        if (newValue) {
          document.body.style.overflow = "hidden";
        } else {
          document.body.style.overflow = "scroll";
        }
      }
    },
    created() {
      if (this.global.SCREEN_WIDTH <= 576) {
        this.headeComponent = "SmallIndexHeader";
        this.headerHeight = "100px";
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @media screen and (min-width: 1200px) {
        .index {
            position: relative;

            .bg {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                background: url("/images/5.png") center center no-repeat;
                background-size: 30%;
                background-position: 0% 0%;
            }

            .el-container {
                position: relative;
                z-index: 3;
                min-height: 100vh;
                min-width: 1200px;
                overflow: hidden;

                .el-header,
                .el-footer {
                    text-align: center;
                    padding: 0;
                    color: #888;
                    div{
                        margin-bottom: 10px;
                    }
                }

                .el-header {
                    .header-box {
                        height: 50%;
                        box-sizing: border-box;
                        overflow: hidden;
                    }
                }

                .el-main {
                    color: #333;
                    text-align: center;
                    min-height: 100vh;
                    height: auto;
                    max-width: 1500px;
                    width: 100vw;
                    margin: 0 auto;
                }
            }
        }
    }

    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .index {
            position: relative;
            /* .ms {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
          } */
            .bg {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                background: url("/images/5.png") center center no-repeat;
                background-size: 30%;
                background-position: 0% 0%;
            }

            .el-container {
                position: relative;
                z-index: 3;
                min-height: calc(100vh);
                width: 100%;
                overflow: hidden;

                .el-header,
                .el-footer {
                    color: #333;
                    text-align: center;
                    padding: 0;
                }

                .el-header {
                    .header-box {
                        height: 50%;
                        box-sizing: border-box;
                        overflow: hidden;
                    }
                }

                .el-main {
                    color: #333;
                    text-align: center;
                    min-height: 100vh;
                    height: auto;
                    max-width: 1500px;
                    width: 100vw;
                    margin: 0 auto;
                    overflow: scroll;
                }
            }
        }
    }

    @media screen and (max-width: 992px) and (min-width: 768px) {
        .index {
            position: relative;
            /* .ms {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
          } */
            .bg {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                background: url("/images/5.png") center center no-repeat;
                background-size: 30%;
                background-position: 0% 0%;
            }

            .el-container {
                position: relative;
                z-index: 3;
                min-height: calc(100vh);
                width: 100%;
                overflow: hidden;

                .el-header,
                .el-footer {
                    color: #333;
                    text-align: center;
                    padding: 0;
                }

                .el-header {
                    .header-box {
                        height: 50%;
                        box-sizing: border-box;
                        overflow: hidden;
                    }
                }

                .el-main {
                    color: #333;
                    text-align: center;
                    min-height: 100vh;
                    height: auto;
                    max-width: 1500px;
                    width: 100vw;
                    margin: 0 auto;
                }
            }
        }
    }

    @media screen and (max-width: 768px) and (min-width: 576px) {
        .index {
            position: relative;
            /* .ms {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
          } */
            .bg {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                background: url("/images/5.png") center center no-repeat;
                background-size: 30%;
                background-position: 0% 0%;
            }

            .el-container {
                position: relative;
                z-index: 3;
                min-height: calc(100vh);
                width: 100%;
                overflow: hidden;

                .el-header,
                .el-footer {
                    color: #333;
                    text-align: center;
                    padding: 0;
                }

                .el-header {
                    .header-box {
                        height: 50%;
                        box-sizing: border-box;
                        overflow: hidden;
                    }
                }

                .el-main {
                    color: #333;
                    text-align: center;
                    min-height: 100vh;
                    height: auto;
                    max-width: 1500px;
                    width: 100vw;
                    margin: 0 auto;
                }
            }
        }
    }

    @media screen and (max-width: 576px) {
        .index {
            position: relative;

            .el-container {
                position: relative;
                z-index: 3;
                min-height: calc(100vh);
                width: 100%;
                overflow: hidden;

                .el-header,
                .el-footer {
                    color: #333;
                    text-align: center;
                    padding: 0;
                }

                .el-header {
                    .header-box {
                        height: 50%;
                        box-sizing: border-box;
                        overflow: hidden;
                    }
                }

                .el-main {
                    padding: 0;
                    color: #333;
                    text-align: center;
                    height: calc(100vh - 100px);
                    width: 100%;
                    margin: 0 auto;

                    &-contianer {
                        height: 100%;
                        overflow: hidden;
                    }
                }
            }
        }
    }
</style>